<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <title>安防监测</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/pc/layui/css/layui.css" media="all" />
    <style type="text/css">
    #address select{width: 9em;height: 30px;border: 1px solid #c0c0c0;border-radius: 5px;outline: none;}
    #address select option{width: 6em;max-width: 100px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  </style>
</head>
<body  class="childrenBody" style="background-color:#eee">
     <div style="width:99%;height:15em;background-color:white;border-radius:10px;position: fixed;">
       <div style="width: 100px;margin-top: 3%;margin-left:3%; height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/is/img/af.png" alt=""></div>
         <p style="margin-top: -5.5em; font-size: 25px; color: #1AA094; font-weight: bold;    margin-left:1em">安防检测设备</p>
         <p style=" margin-top: 8.5em; font-size: 15px; color: #1AA094; font-weight: bold; margin-left: 4em;" >设备总数:<span style="color: red;font-family: fantasy">&nbsp;5</span></p>
         <div style="margin-top: -8%;margin-left:12%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/is/img/wz.png" alt=""></span>
          <p>位置</p>
          <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>
              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
          
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
          </div>
           <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 39em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
          </div>
          
        <div style=" width: 100%; margin-top: 3%;margin-left: 12%;">
           <li style=" width: 25%;float:right;">
            <span ><img  style="width: 25px;" src="/NB/is/img/kg1.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;margin-top: -5px;">开关</p>
          </li>
          <li style=" width: 25%;float: left;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/is/img/af1.png" alt=""></span>
             <p style="font-size: 15px;font-weight: bold;">设备<span style="color: red;font-weight: bold;font-size: 18px">&nbsp;0000000000000001</span>
             </p>
          </li>
          <li style=" width: 25%;float: left;margin-left:12%;">
            <span ><img  style="width: 20px;margin-left: 1%;" src="/NB/is/img/jk.png" alt=""></span>
            <p style="font-size: 15px;font-weight: bold;">监控</p>
          </li>
         
         
        </div>   
     </div>
  <p style="position: fixed;width:98.7%; font-weight: bold;font-size: 15px;text-align: center;background-color:#23a79a;left:1em;height: 1.3em;line-height: 1.3em;margin-top: 15em">历史漏气次数</p>
   <div id="container" style="width: 99%; height: 500px;position: fixed;top: 18.2em"></div>
</body>

 <script type="text/javascript" src="/NB/iff/js/jquery-3.2.0.min.js"></script>
 <script type="text/javascript" src="/pc/layui/layui.js"></script>
 <script type="text/javascript" src="/NB/is/js/addres.js"></script>
 <script src="/NB/is/js/echarts.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function(){
      $("#address").selectAddress()
      $("#town").focusout(function(){
        var province = $("#province option:selected").html()
        var city = $("#city option:selected").html()
        var town = $("#town option:selected").html()
        if(province!= '选择区域' && city!="选择建筑" && town!='选择房间'){
          console.log('区域：'+province+'\n建筑:'+city+'\n房间：'+town)
        } 
      })
    })
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [0, 0, 4, 0, 3, 5],
                type: 'line'
            }]
        };
        ;
        if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
     setTimeout(function (){  
           window.onresize = function () {      
               myChart.resize();  
                    }  
                },200) 
  </script>
</html>